<template>
  <x-main>
    <view class="x-normal-top" v-for="(item, index) in orderBillList">
      <x-empty :show="$emptyArray(orderBillList)"></x-empty>
      <x-preview @click="onClick(item)" :title="`${item.currentPeriod}/${item.totalPeriod}期（${format(item.billState) || '-'}）`" :columns="col" :data="item">
        <view slot="tools" class="x-text-primary">已付0元/总200元</view>
        <template #bottom>
          <view class="x-row-reverse">
            <view @click="onClick(item)" class="x-small-btn x-small-left x-btn-primary">详情</view>
            <!--      <view @click="onReduction" class="x-small-btn x-btn-primary">费用减免</view>-->
          </view>
        </template>
      </x-preview>
    </view>
  </x-main>
</template>

<script setup>
import XPreview from '@/components/lib/preview'
import billStore from '@/stores/modules/bill';
const BillStore = billStore();
const {orderBillList} = storeToRefs(BillStore);
import {ref} from 'vue';
import {onLoad} from "@dcloudio/uni-app";
import {storeToRefs} from "pinia";
import {Helper, Constant} from 'core';
const col = ref([
  {label: "还款金额", field: "billAmount", format:(option, data) => {
      let row = getAmount(data, 'BILL');
      return Helper.emptyJson(row) ? "-" : `已付${row.paidAmount}元/总${row.totalAmount}`
    }},
  {label: "减免金额", field: "billAmount1", format:(option, data) => {
      let row = getAmount(data, 'COST_REDUCE');
      return Helper.emptyJson(row) ? "0" : `${row.totalAmount}`
    }},
  {label: "线下支付", field: "billAmount2",format:(option, data) => {
      let row = getAmount(data, 'OFFLINE_PAY');
      return Helper.emptyJson(row) ? "0" : `${row.totalAmount}`
    }},
  {label: "还款日期", field: "billPaymentDate"},
])

onLoad(option => {
  BillStore.getListByOrderNo(option.orderNo);
})

/**
 * 订单跳转页面
 * @param data
 */
const onClick = (data) => {
  uni.navigateTo({url: "/pages/bill/detail?billId=" + data.billId})
}

const getAmount = (data, type) => {
  if(! Helper.emptyArray(data.amountList)) {
    let row = data.amountList.find(x => x.fundChangeProject == type);
    return Helper.emptyJson(row) ? {} : row;
  }
  return {};
}

const format = (value) => {
  let obj =  Constant.BILL.STATUS.find(x => x.value == value);
  if(Helper.emptyJson(obj)) {
    return "";
  }
  return obj.label;
}
</script>

<style scoped lang="less">

</style>
